<template>
	<view class="container">
		<uni-card title="RFID绑定" :is-shadow="true" margin="20rpx" class="full-height-card">
			<view class="card-content">
				<uni-section title="操作" type="line">
					<view class="button-group">
						<button type="primary" @click="handleReadNFC">读取信息</button>
					</view>
				</uni-section>
				
				<uni-section title="状态信息" type="line" margin-top="20rpx">
					<view class="button-group">
						<text class="result-text">当前状态：{{ status }}</text>
					</view>
				</uni-section>
				
				<uni-section title="读取结果" type="line" margin-top="20rpx">
					<view class="result-box">
						<uni-card v-if="message" :is-shadow="false" padding="10px 0">
							<text class="result-text">{{ message }}</text>
						</uni-card>
						<view v-else class="empty-result">
							<uni-icons type="info" size="30" color="#909399"></uni-icons>
							<text class="empty-text">暂无数据</text>
						</view>
					</view>
				</uni-section>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: '未开始',
				message: '',
			}
		},
		methods: {
			handleReadNFC() {
				this.status = '正在检测NFC状态...';
				if (!wx || !wx.qy) {
					this.status = '未检测到企业微信环境';
					return;
				}
				// 获取NFC状态
				wx.qy.getNFCReaderState({
					success: (res) => {
						this.status = 'NFC状态: ' + JSON.stringify(res);
						// 启动NFC读取
						wx.qy.startNFCReader({
							success: (res) => {
								this.status = 'NFC读取已启动';
							},
							fail: (err) => {
								this.status = '启动NFC读取失败: ' + JSON.stringify(err);
							}
						});
					},
					fail: (err) => {
						this.status = '获取NFC状态失败: ' + JSON.stringify(err);
					}
				});
				// 监听NFC消息
				if (typeof wx.qy.onNFCReadMessage === 'function') {
					wx.qy.onNFCReadMessage((res) => {
						this.message = '读取到的信息: ' + JSON.stringify(res);
						this.status = '读取成功';
					});
				}
			},
			// 可选：页面卸载时停止NFC读取
			beforeDestroy() {
				if (wx && wx.qy && typeof wx.qy.stopNFCReader === 'function') {
					wx.qy.stopNFCReader();
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}
	
	.container {
		padding-bottom: 0;
		min-height: 100vh;
	}
	
	.full-height-card {
		min-height: calc(100vh - 140rpx);
		margin-bottom: 0 !important;
		box-shadow: none !important;
		
		:deep(.uni-card__content) {
			padding-bottom: 50rpx;
		}
	}
	
	.card-content {
		padding: 10rpx 0;
	}
	
	.button-group {
		display: flex;
		justify-content: center;
		margin: 20rpx 0;
		
		button[type="primary"] {
			background-color: #3A8CFF;
			width: 200rpx;
			font-size: 28rpx;
		}
	}
	
	.result-box {
		min-height: 200rpx;
		background-color: #f8f8f8;
		border-radius: 5px;
	}
	
	.result-text {
		font-size: 28rpx;
		word-break: break-all;
		padding: 10rpx;
	}
	
	.empty-result {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 50rpx 0;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #909399;
		margin-top: 10rpx;
	}
</style> 